<template>
	<div id="select_specification">
    <transition name="fade">
		<div class="mask" @tap="close"  v-show="$store.state.goods.select_specification_show"></div>
    </transition>


    <transition name="slide-fade">
		<div class="ptsp_confirm_goods"  v-show="$store.state.goods.select_specification_show" >
			<div class="ptsp_confirm_goods_info">
				<i class="mui-icon mui-icon-closeempty" @tap="close"></i>
				<div class="goods_img">
					<img :src="$store.state.goods.goods_info.pic" alt="" />
				</div>
				<div class="price">

					<span class="price_num">￥
						<span>{{$store.state.goods.buy_type=='group' ? $store.state.goods.now_specification_price_group : $store.state.goods.now_specification_price_normal}}</span>
					</span>
					<br/>
					<span class="">库存：
						<span >{{$store.state.goods.now_specification_stock}}</span>
					</span>
					<br/>
					<span class="">已选：
						<span style="color: #1c83fc;">
							<span>{{$store.state.goods.now_specification_name}}</span>
						</span>
					</span>
				</div>

				<div class="sel_color">
					<p>颜色</p>
					<div class="color_items select_color">
						<div @tap="sel_spec(k)" :class="$store.state.goods.now_specification_index==k?'item active':'item'" v-for="(i,k) in $store.state.goods.specifications" :key="k" >
						{{i.rule}}
						</div>
					</div>
				</div>

				<div class="sel_num">
					<p>数量</p>
					<div class="num_btns">
						<div class="cut" @tap="cut_buy_num">-</div>
						<div class="num"  >{{$store.state.goods.buy_num}}</div>
						<div class="add" @tap="add_buy_num" >+</div>

					</div>
				</div>
				<br/>
				<br/>

			</div>
			<div class="btn" @tap="submit_goods">确认</div>
		</div>
</transition>

	</div>
</template>
<script>

import goods_ajax from "../../../ajax/goods_ajax"
export default {
  name: "select_specification",
  data() {
    return {
      select_specification_mask: ""
    };
  },
  methods: {
    //选择规格
    sel_spec(k) {
      this.$store.commit("change_specification", k);
    },
    cut_buy_num() {
      this.$store.commit("cut_buy_num");
    },
    add_buy_num() {
      console.log();
      if(this.$store.state.goods.buy_type=="group"){
        console.log("拼团商品只能购买一个")
        mui.toast("拼团商品只能购买一个")
        return
      }
      this.$store.commit("add_buy_num");

    },
    close() {
      this.$store.commit("change_select_specification_show", false);
    },
    submit_goods(){
      if(this.$store.state.goods.buy_type=='car'){
        console.log("---------------------添加购物车--------------------------");
        console.log("↓↓↓商品信息↓↓↓")
        console.dir(this.$store.state.goods.goods_info);
        console.log("↓↓↓购买数量↓↓↓")
        console.log(this.$store.state.goods.buy_num);
        console.log("↓↓↓直接购买价格↓↓↓")
        console.log(this.$store.state.goods.now_specification_price_normal);
        console.log("↓↓↓当前规格名称↓↓↓")
        console.log(this.$store.state.goods.now_specification_name);
        console.log("↓↓↓当前规格ID↓↓↓")
        console.log(this.$store.state.goods.now_specification_id);
        goods_ajax.add_buy_car({
          goodsid:this.$store.state.goods.goods_info.goodsid,
          buy_num:this.$store.state.goods.buy_num,
          rule:this.$store.state.goods.now_specification_name,
          uid:this.$store.state.account.user_info.uid
        },res=>{
          if(res){
            mui.toast("添加购物车成功");
            let goods_info = this.$store.state.goods.goods_info;
            goods_info.added_car = true;
            this.$store.commit("updata_goods_info",goods_info)
          }
        })
      }
      if(this.$store.state.goods.buy_type=='normal'){
        console.log("----------------直接购买下单---------------");
        console.log("↓↓↓商品信息↓↓↓")
        console.dir(this.$store.state.goods.goods_info);
        console.log("↓↓↓购买数量↓↓↓")
        console.log(this.$store.state.goods.buy_num);
        console.log("↓↓↓直接购买价格↓↓↓")
        console.log(this.$store.state.goods.now_specification_price_normal);
        console.log("↓↓↓当前规格名称↓↓↓")
        console.log(this.$store.state.goods.now_specification_name);
        console.log("↓↓↓当前规格ID↓↓↓")
        console.log(this.$store.state.goods.now_specification_id);

        this.$store.commit("save_group_order_info",{
          goods_info:this.$store.state.goods.goods_info,
          buy_num:this.$store.state.goods.buy_num,
          buy_price:this.$store.state.goods.now_specification_price_normal,
          rule:this.$store.state.goods.now_specification_name,
          rule_id:this.$store.state.goods.now_specification_id
        })
        this.$router.push("/shop/goods_list/goods/confirm_order")
      }
      if(this.$store.state.goods.buy_type=='group'){
        console.log("----------------拼团下单---------------");
        console.log("↓↓↓商品信息↓↓↓")
        console.dir(this.$store.state.goods.goods_info);
        console.log("↓↓↓购买数量↓↓↓")
        console.log(this.$store.state.goods.buy_num);
        console.log("↓↓↓拼团购买价格↓↓↓")
        console.log(this.$store.state.goods.now_specification_price_group);
        console.log("↓↓↓当前规格名称↓↓↓")
        console.log(this.$store.state.goods.now_specification_name);
        console.log("↓↓↓当前规格ID↓↓↓")
        console.log(this.$store.state.goods.now_specification_id);
        console.log("↓↓↓当前SID↓↓↓")
        console.log(this.$route.query.sid);
         console.log("↓↓↓当前spell_id↓↓")
        console.log( this.$store.state.goods.group_order_spell_id )
 
        this.$store.commit("save_group_order_info",{
          goods_info:this.$store.state.goods.goods_info,
          buy_num:this.$store.state.goods.buy_num,
          buy_price:this.$store.state.goods.now_specification_price_group,
          rule:this.$store.state.goods.now_specification_name,
          rule_id:this.$store.state.goods.now_specification_id,
          sid:this.$route.query.sid
        })
        this.$router.push("/shop/goods_list/goods/confirm_order")
      }
    }
  },
   
};
</script>


<style lang="less" scoped>
.ptsp_confirm_goods {
  position: fixed;
  left: 0;
  bottom: 0;
  height: auto;
  width: 100%;
  z-index: 1000;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info {
  width: 100%;
  padding-left: 0.5973rem;
  background-color: #ffffff;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info i {
  position: absolute;
  top: 0.6827rem;
  right: 0.5547rem;
  font-size: 1.4933rem;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .goods_img {
  width: 5.4613rem;
  height: 5.4613rem;
  display: inline-block;
  border: 2px solid #ffffff;
  position: relative;
  top: -0.768rem;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .goods_img img {
  width: 100%;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .price {
  display: inline-block;
  width: 6.8267rem;
  margin-left: 0.5973rem;
  position: relative;
  top: 0.4267rem;
  font-size: 0.4693rem;
  .price_num {
    font-size: 0.66rem;
  }
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .price .sale_price {
  font-size: 0.768rem;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .price span span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_color {
  width: 100%;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_color .color_items {
  overflow: hidden;
  width: 100%;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_color .color_items .item {
  float: left;
  width: 6.08rem;
  height: 1.4933rem;
  line-height: 1.4933rem;
  text-align: center;
  font-size: 0.512rem;
  border: 1px solid #353535;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 1.1947rem;
  margin-bottom: 0.7467rem;
  border-radius: 0.1707rem;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_color .color_items .active {
  border: 1px solid #1c83fc;
  color: #1c83fc;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num {
  width: 100%;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns {
  width: 100%;
  overflow: hidden;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .cut,
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .num,
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .add {
  float: left;
  text-align: center;
  color: #888888;
  height: 1.1947rem;
  line-height: 1.1947rem;
  border: 1px solid #d7d7d7;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .num {
  width: 1.6rem;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .cut {
  border-right: none;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .add {
  border-left: none;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .cut,
.ptsp_confirm_goods .ptsp_confirm_goods_info .sel_num .num_btns .add {
  width: 1.7067rem;
  background-color: #f9f9f9;
}
.ptsp_confirm_goods .btn {
  width: 100%;
  height: 2.1333rem;
  text-align: center;
  line-height: 2.1333rem;
  color: #ffffff;
  background: linear-gradient(to right, #1cb5fc, #1c83fc);
}
</style>

